import { useCommonStore } from "@/stores/common";
const { setGlobalData } = useCommonStore();
import * as echarts from "echarts";
import FiveOldman from "@/views/nx/components/Map/JSONsource/FiveOldman.json";
// 能力等级——3D
export const CapabilityLevelPie3d = (pieData) => {
  return {
    pieData,
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      alpha: 30, //角度(这个很重要 调节角度的)
      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
      rotateSensitivity: 0, //设置为0无法旋转
      zoomSensitivity: 0, //设置为0无法缩放
      panSensitivity: 0, //设置为0无法平移
      autoRotate: false, //自动旋转
    },
    legend: {
      show: false,
    },
  };
};
//各类业务——3D
export const BusinessTypePie3d = (pieData) => {
  return {
    pieData,
    legend: {
      show: false,
    },
    viewControl: {
      //3d效果可以放大、旋转等，请自己去查看官方配置
      alpha: 30, //角度(这个很重要 调节角度的)
      distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
      rotateSensitivity: 0, //设置为0无法旋转
      zoomSensitivity: 0, //设置为0无法缩放
      panSensitivity: 0, //设置为0无法平移
      autoRotate: true, //自动旋转
    },
  };
};
// 志愿者
export const VolunteerPieChartConfig = () => {
  const colors = [
    "#00C2FF",
    "#0474FE",
    "#00FDFF",
    "#1CC0DE",
    "#08EE8A",
    "#2772B4",
  ];
  let x = ["18~25", "25~35", "35~45", "45~55", "55~65", "65以上"];
  let y = [80, 99, 61, 105, 70, 120];
  const total = y.reduce((a, b) => a + b);
  const data = x.map((item, index) => {
    const piec = (y[index] / total) * 100;
    return {
      value: piec.toFixed(2),
      name: item,
    };
  });
  function getRich() {
    let result = {};
    colors.forEach((v, i) => {
      result[`hr${i}`] = {
        backgroundColor: colors[i],
        borderRadius: 3,
        width: 3,
        height: 3,
        padding: [3, 3, 0, -12],
      };
      result[`a${i}`] = {
        color: colors[i],
        backgroundColor: "transparent",
        fontSize: 12,
      };
      result[`white`] = {
        color: "white",
      };
    });
    return result;
  }
  const option = {
    color: colors,
    tooltip: {
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>占比：{d}%",
    },
    series: [
      {
        type: "pie",
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        data: data,
        roseType: "radius",
        label: {
          show: true,
          position: "outside",
          formatter: function (params) {
            const name = params.name;
            const percent = params.percent + "%";
            const index = params.dataIndex;
            return [
              `{white|${name}：}`,
              `{hr${index}|}`,
              `{a${index}|${params.value}}`,
            ].join("\n");
          },
          rich: getRich(),
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 15,
          lineStyle: {
            color: "#fff",
          },
        },
        itemStyle: {
          shadowBlur: 200,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
        animationType: "scale",
        animationEasing: "elasticOut",
      },
    ],
  };

  return option;
};
//五类老人
export const FiveTypePie = () => {
  // 数据
  let chartdata = [
    {
      name: "计划生育特殊家庭老年人",
      value: 30,
    },
    {
      name: "特困老年人",
      value: 50,
    },
    {
      name: "最低生活保障家庭",
      value: 80,
    },
    {
      name: "特困老年人",
      value: 90,
    },
  ];
  let radius = ["58%", "70%"];
  // 颜色系列
  let color = ["#43A9F8", "#FFB62E", "#7FFAFF", "#FA8164"];

  // 每层圆环大小
  let rich = {
    total: {
      color: "#51BFED",
      fontSize: 20,
      fontWeight: 700,
      align: "center",
    },
  };
  const handleRich = () => {
    let result = {};
    color.forEach((el, index) => {
      result[`color${index}`] = {
        color: el,
      };
    });
    return result;
  };
  let option = {
    title: {
      text: "老年人人数",
      left: "center",
      top: "30%",
      padding: [24, 0],
      textStyle: {
        color: "#fff",
        fontSize: 18,
        align: "center",
      },
    },
    legend: {
      selectedMode: false,
      formatter: function (name) {
        var total = 0; //总和
        chartdata.forEach(function (value, index, array) {
          total += value.value;
        });
        return "{total|" + total + "}";
      },
      data: [chartdata[0].name],
      // itemGap: 10,
      left: "center",
      top: "50%",
      icon: "none",
      align: "center",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        rich: rich,
      },
    },
    grid: {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      containLabel: true,
    },
    // graphic: {
    //   elements: [{
    //       type: "image",
    //       z: 3,
    //       style: {
    //           image: FiveOldman.src,
    //           width: 165,
    //           height:165
    //       },
    //       left: 'center',
    //       top:  'center',
    //       position: [100, 100]
    //   }]
    //   },
    tooltip: {
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      formatter: "{b}<br/>占比：{d}%",
    },
    series: [
      {
        type: "pie",
        radius: radius,
        center: ["50%", "50%"],
        hoverAnimation: false,
        startAngle: 90,
        selectedMode: "single",
        selectedOffset: 0,
        padAngle: 5, // 区域间距
        itemStyle: {
          normal: {
            color: (params) => {
              return color[params.dataIndex];
            },
          },
        },
        label: {
          color: "#fff",
          show: true,
          position: "outside",
          formatter: function (params) {
            let percent = "0";
            var total = 0;
            let index = params.dataIndex;
            for (var i = 0; i < chartdata.length; i++) {
              total += chartdata[i].value;
            }

            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return (
                params.name + "\n" + "\n" + `{color${index}|${params.value}}`
              );
            } else {
              return "";
            }
          },
          align: "left",
          rich: handleRich(),
          // padding: [0, -50, 10, -60],
        },
        labelLine: {
          show: true,
          length: 12,
          length2: 12,
          lineStyle: {
            // color: '#fff',
            // width: 2,
          },
        },
        data: chartdata,
        z: 666,
      },
    ],
  };
  return option;
};
// 老年人居住情况统计
export const elderlyResidence = () => {
  var salvProName = ["独居", "与配偶居住", "与子女居住", "养老机构", "其他"];
  var salvProValue = [239, 181, 154, 144, 181];
  var salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(salvProValue[0]);
  }
  let option = {
    backgroundColor: "transparent",
    grid: {
      left: "2%",
      right: "10%",
      bottom: "2%",
      top: "2%",
      width: "95%",
      height: "70%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(18, 55, 85, 0.8);",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: true,
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(26, 32, 43, 1)",
        },
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
          },
        },
        data: salvProValue,
      },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 5.5,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgba(69, 168, 251, 0.1)",
              },
              {
                offset: 1,
                color: "rgba(69, 168, 251, 1)",
              },
            ]),
          },
        },
        barWidth: 11,
        data: salvProValue,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 11,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(36, 42, 55, 1)",
            barBorderRadius: 5.5,
          },
        },
      },
    ],
  };
  return option;
};
